<template>
    <div :style="carStyle">
        <div v-if="!showContent" class="defaultText">请在右侧配置数据</div>
        <template v-else>
            <div class="lineTitle" v-if="obj.isShowTitle" :style="titleStyle">{{ obj.title }}</div>
        </template>
        <div class="chart" ref="constat" :style="canvasStyle"></div>
        <!-- <div class="gotoViewBtn" v-if="isGotoView" @click="gotoUrl(obj)"></div> -->
    </div>
</template>

<script>
import * as echarts from 'echarts';
// import { oneLoad, boardOneLoad } from '@/api/share'

export default {
    Name: "Rate",
    components: {
        echarts
    },
    props: {
        obj: Object,
        isReload: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: Function,
        getTableValue: Function,
    },
    data() {
        return {
            collapseActives: ['1', '2', '3', '4', '5'],
            showContent: false,
            carStyle: {},
            titleStyle: {},
            canvasStyle: {
                width: "100%",
                height: "100%"
            },
            chart: undefined,
            // 用于比对数据是否修改
            dataStr: "",
            timer: null,
            timer2: null,
            filterForm: {}
        }
    },
    // computed: {
    //     isGotoView() {
    //         if (this.isEdit == false && this.obj.contactType > 0) {
    //             if (this.obj.contactType == 1 && this.obj.boardId) {
    //                 return true;
    //             }
    //             if (this.obj.contactType == 2 && this.obj.url) {
    //                 return true;
    //             }
    //         }
    //         return false;
    //     }
    // },
    mounted() {
        this.setStyle();

        this.$nextTick(function () {
            this.reloadInfo();
        })

        this.dataStr = JSON.stringify(this.obj.tableData);

        // 页面变化调整尺寸
        var self = this;
        window.addEventListener('resize', function () {
            if (self.chart) {
                self.chart.resize();
            }
        }, true);
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
        clearInterval(this.timer)
    },
    methods: {
        reloadInfo() {
            // 重绘
            if (this.chart) {
                this.chart.dispose()
            }
            var constat = this.$refs.constat;
            this.chart = echarts.init(constat);

            var timeSize = 60;
            if (this.obj.tableData.reloadTime) {
                timeSize = this.obj.tableData.reloadTime;
            }

            if (this.obj.tableData.type == 1) {
                // 刷新时间兼容处理
                if (timeSize < 60) {
                    timeSize = 60;
                }
            }

            clearInterval(this.timer);
            this.getFirstData();

            if (this.isReload) {
                this.timer = setInterval(() => {
                    this.getLineData();
                }, timeSize * 1000);
            }
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";
            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            this.titleStyle = {
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
            }

            // 标题隐藏显示
            var isShowTitle = this.obj.isShowTitle ? true : false;
            var echarHeight = style.height;
            var echarMarginTop = 0;
            if (isShowTitle) {
                echarHeight = style.height - style.fontSize - style.borderWidth * 2;
                echarMarginTop = style.fontSize + "px";
            }

            this.canvasStyle = {
                marginTop: echarMarginTop,
                width: "100%",
                height: echarHeight + "px",
            }

            if (this.chart) {
                this.chart.resize({
                    width: style.width,
                    height: echarHeight,
                });
            }
        },
        setOptions(text, data) {
            // this.chart.clear();
            clearInterval(this.timer2);

            var colorList = ['#998CEF', '#D9D8EB'];
            if (this.obj.tableData.valueColor && this.obj.tableData.rateBackageColor) {
                colorList = [this.obj.tableData.valueColor, this.obj.tableData.rateBackageColor];
            }

            var textStyle = {
                fontSize: '52px', //文本字号,
                color: "#fff",
                fontWeight: '',
                fontStyle: ''
            }
            if (this.obj.tableData.fontSize) {
                textStyle.fontSize = this.obj.tableData.fontSize + "px";
            }
            if (this.obj.tableData.fontColor) {
                textStyle.color = this.obj.tableData.fontColor;
            }
            if (this.obj.tableData.fontWeight) {
                textStyle.fontWeight = this.obj.tableData.fontWeight;
            }
            if (this.obj.tableData.fontStyle) {
                textStyle.fontStyle = this.obj.tableData.fontStyle;
            }

            if (this.obj.tableData.styleTemplate == 1) {
                let value = 0.65;
                option = {
                    title: {
                        text: text,
                        x: 'center',
                        y: 'center',
                        textStyle: textStyle
                    },
                    series: [
                        {
                            type: 'pie',
                            name: '外圆环',
                            radius: ['61%', '63%'],
                            hoverAnimation: false,
                            clockWise: false,
                            itemStyle: {
                                normal: {
                                    color: '#304867',
                                },
                            },
                            label: {
                                show: false,
                            },
                            data: [100],
                        },
                        {
                            name: '吃猪肉频率',
                            type: 'pie',
                            radius: ['58%', '45%'],
                            silent: true,
                            clockwise: true,
                            startAngle: 90,
                            z: 0,
                            zlevel: 0,
                            label: {
                                normal: {
                                    position: 'center',
                                },
                            },
                            data: [
                                {
                                    value: data[0],
                                    name: '',
                                    itemStyle: {
                                        normal: {
                                            color: colorList[0]
                                        },
                                    },
                                },
                                {
                                    value: data[1],
                                    name: '',
                                    label: {
                                        normal: {
                                            show: false,
                                        },
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: colorList[1]
                                        },
                                    },
                                },
                            ],
                        },
                        {
                            // name: '',
                            // type: 'gauge',
                            // radius: '58%',
                            // center: ['50%', '50%'],
                            // startAngle: 0,
                            // endAngle: 359.9,
                            // splitNumber: 60,
                            // hoverAnimation: true,
                            // axisTick: {
                            //     show: false,
                            // },
                            // splitLine: {
                            //     length: 60,
                            //     lineStyle: {
                            //         width: 5,
                            //         color: '#061740',
                            //     },
                            // },
                            // axisLabel: {
                            //     show: false,
                            // },
                            // pointer: {
                            //     show: false,
                            // },
                            // axisLine: {
                            //     lineStyle: {
                            //         opacity: 0,
                            //     },
                            // },
                            // detail: {
                            //     show: false,
                            // },
                            // data: [
                            //     {
                            //         value: 0,
                            //         name: '',
                            //     },
                            // ],
                            // 刻度线设置
                            type: 'gauge',
                            name: '',
                            radius: '58%',
                            center: ['50%', '50%'],
                            startAngle: 0,
                            endAngle: 360,
                            silent: false,
                            splitNumber: 60,
                            splitLine: {
                                length: 16,
                                lineStyle: {
                                    width: 5,
                                    color: '#061740',
                                },
                            },
                            // 是否显示仪表盘数据
                            detail: {
                                show: false
                            },
                            pointer: {
                                show: false
                            },
                            axisLabel: {
                                show: false,
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false,
                            },
                            data: [data[0]],
                            z: 10,
                        },
                        {
                            type: 'pie',
                            name: '内环',
                            radius: ['40%', '42%'],
                            hoverAnimation: false,
                            clockWise: false,
                            itemStyle: {
                                normal: {
                                    color: '#304867',
                                },
                            },
                            label: {
                                show: false,
                            },
                            data: [100],
                        },
                    ],
                };
                // option = {
                //     backgroundColor: '#051F54',
                //     title: {
                //         text: '{a|' + value * 100 + '%}',
                //         x: 'center',
                //         y: 'center',
                //         textStyle: {
                //             rich: {
                //                 a: {
                //                     fontSize: 36,
                //                     color: '#FFEB0D'
                //                 },
                //             }
                //         }
                //     },
                //     series: [{
                //         //进度格主体样式
                //         type: 'gauge',
                //         // radius: ['60%', '82%'],
                //         // radius: '82%',
                //         clockwise: true,
                //         startAngle: '90',
                //         endAngle: '-269.999',
                //         splitNumber: 12,
                //         detail: {
                //             show: false
                //         },
                //         pointer: {
                //             show: false
                //         },
                //         axisLine: {
                //             show: true,
                //             lineStyle: {
                //                 color: [
                //                     [1, 'rgba(32,187,252,0.15)']
                //                 ],
                //                 width: 30
                //             }
                //         },
                //         axisTick: {
                //             show: false,
                //         },
                //         splitLine: {
                //             show: true,
                //             length: 32,
                //             lineStyle: {
                //                 color: '#051F54',
                //                 width: 8
                //             }
                //         },
                //         axisLabel: {
                //             show: false
                //         }
                //     }, {
                //         //进度格外侧刻度装饰样式
                //         type: 'gauge',
                //         radius: '100%',
                //         startAngle: '90',
                //         endAngle: '-269.999',
                //         splitNumber: 12,
                //         axisTick: {
                //             show: true,
                //             splitNumber: 10,
                //             lineStyle: {
                //                 color: '#1885FF',
                //                 width: 1
                //             },
                //             length: 10
                //         },
                //         detail: {
                //             show: false
                //         },
                //         pointer: {
                //             show: false
                //         },
                //         axisLine: {
                //             show: false
                //         },
                //         splitLine: {
                //             show: false
                //         },
                //         axisLabel: {
                //             show: false
                //         }
                //     }, {
                //         //进度格渐变样式
                //         name: "",
                //         type: "pie",
                //         radius: ["65%", "82%"],
                //         center: ['50%', '50%'],
                //         hoverAnimation: false,
                //         silent: false,
                //         clockwise: true,
                //         startAngle: 90,
                //         z: 0,
                //         zlevel: 0,
                //         label: {
                //             show: false
                //         },
                //         data: [
                //             {
                //                 value: value * 360,
                //                 name: "",
                //                 label: {
                //                     show: false
                //                 },
                //                 itemStyle: {
                //                     color: new echarts.graphic.LinearGradient(0, 0, 0, value, [{
                //                         offset: 0,
                //                         color: '#1885FF'
                //                     }, {
                //                         offset: value,
                //                         color: '#0D0DCB'
                //                     }
                //                     ])
                //                 }
                //             },
                //             {
                //                 value: 360 * (1 - value),
                //                 name: "",
                //                 label: {
                //                     normal: {
                //                         show: false
                //                     }
                //                 },
                //                 itemStyle: {
                //                     normal: {
                //                         color: "#001B3A"
                //                     }
                //                 }
                //             }
                //         ]
                //     }, {
                //         //进度格内侧圆环装饰样式
                //         type: 'pie',
                //         name: '内层细圆环',
                //         radius: ['20%', '22%'],
                //         hoverAnimation: false,
                //         clockWise: false,
                //         itemStyle: {
                //             normal: {
                //                 color: '#0C355E'
                //             }
                //         },
                //         label: {
                //             show: false
                //         },
                //         data: [1]
                //     }
                //     ]
                // };
                this.chart.setOption(option);
            }
            else if (this.obj.tableData.styleTemplate == 2) {
                const percent = Number(data[0] / this.obj.tableData.maxNumber * 100) // 数值

                var option = {
                    title: {
                        text: text,
                        x: 'center',
                        y: 'center',
                        textStyle: textStyle
                    },
                    polar: {
                        radius: ['75%', '90%'],
                        center: ['50%', '50%']
                    },
                    // 极坐标角度轴
                    angleAxis: {
                        min: 0,
                        max: 100,
                        // startAngle: 0,
                        // endAngle: -0,
                        clockwise: true,
                        show: false, // 隐藏刻度线
                    },
                    // 极坐标径向轴
                    radiusAxis: {
                        type: 'category',
                        show: true,
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false
                        },
                    },
                    // tooltip: {
                    //     show: true,
                    //     formatter: val => {
                    //         return `${val.seriesName}: ${val.data}%`
                    //     },
                    //     backgroundColor: 'rgba(31, 196, 225, 0.2)',
                    //     borderColor: 'rgba(31, 196, 225, 0.6)'
                    // },
                    series: [
                        {
                            // 进度条
                            type: 'bar',
                            name: '占比',
                            coordinateSystem: 'polar',
                            // 设置柱子背景灰色，需开启showBackground才能显示backgroundStyle
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(14, 61, 128,0.3)',
                                // color: 'rgba(255,255,255, 0.15)'
                            },
                            // 两端设置圆角
                            roundCap: true,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: 'rgba(190, 235, 255,0.65)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0,0,255,1)'
                                    },
                                    ]),
                                },
                                // color: {
                                //     x: 0,
                                //     y: 0,
                                //     x1: 0,
                                //     y1: 1,
                                //     colorStops: [{
                                //         offset: 0,
                                //         color: 'rgba(190, 235, 255,0.65)'
                                //     }, {
                                //         offset: 1,
                                //         color: 'rgba(0,0,255,1)'
                                //     }]
                                // }
                            },
                            data: [percent]
                        },
                        {
                            // 刻度线设置
                            type: 'gauge',
                            name: '',
                            radius: '79%',
                            center: ['50%', '50%'],
                            startAngle: 0,
                            endAngle: 360,
                            silent: false,
                            splitNumber: 16,
                            splitLine: {
                                length: '10%',
                                distance: 0,
                            },
                            // 是否显示仪表盘数据
                            detail: {
                                show: false
                            },
                            pointer: {
                                show: false
                            },
                            axisLabel: {
                                show: false,
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false,
                            },
                            data: [percent],
                            z: 10,
                        }
                    ]
                };

                this.chart.setOption(option);
            }
            else if (this.obj.tableData.styleTemplate == 3) {
                let angle = 0; // 角度
                let dataValue = data[0];
                var option = {
                    title: {
                        text: text,
                        x: 'center',
                        y: 'center',
                        textStyle: textStyle
                    },
                    series: [
                        /** 绘制内部圆弧-1 <right-top> */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                                        startAngle: (270 + angle) * Math.PI / 180,
                                        endAngle: (360 + angle) * Math.PI / 180
                                    },
                                    style: {
                                        fill: 'transparent',
                                        stroke: 'rgba(1, 248, 68, 0.4)',
                                        lineWidth: 2
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 绘制内部圆弧-2 <left-bottom> */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                                        startAngle: (90 + angle) * Math.PI / 180,
                                        endAngle: (180 + angle) * Math.PI / 180
                                    },
                                    style: {
                                        fill: 'transparent',
                                        stroke: 'rgba(1, 248, 68, 0.4)',
                                        lineWidth: 2
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 绘制外部圆弧-1 <right-bottom> */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.66,
                                        startAngle: (355 + -angle) * Math.PI / 180,
                                        endAngle: (120 + -angle) * Math.PI / 180
                                    },
                                    style: {
                                        fill: 'transparent',
                                        stroke: 'rgba(1, 248, 68, 0.4)',
                                        lineWidth: 2.6
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 绘制外部圆弧-2 <left-top> */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                return {
                                    type: 'arc',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.66,
                                        startAngle: (175 + -angle) * Math.PI / 180,
                                        endAngle: (300 + -angle) * Math.PI / 180
                                    },
                                    style: {
                                        fill: 'transparent',
                                        stroke: 'rgba(1, 248, 68, 0.4)',
                                        lineWidth: 2.6
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 绘制外部圆弧-1-开始圆点 <right-bottom> */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                let x0 = api.getWidth() / 2;
                                let y0 = api.getHeight() / 2;
                                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.66;
                                return {
                                    type: 'circle',
                                    shape: {
                                        /** 角度355° 外弧1开始角度 */
                                        cx: x0 + r * Math.cos((355 + -angle) * Math.PI / 180),
                                        cy: y0 + r * Math.sin((355 + -angle) * Math.PI / 180),
                                        r: 4
                                    },
                                    style: {
                                        fill: 'rgba(1, 248, 68, 0.4)',
                                        stroke: 'rgba(1, 248, 68, 0.4)'
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 绘制外部圆弧-2-开始圆点 <left-top> */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                let x0 = api.getWidth() / 2;
                                let y0 = api.getHeight() / 2;
                                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.66;
                                return {
                                    type: 'circle',
                                    shape: {
                                        /** 角度175° 外弧2开始角度 */
                                        cx: x0 + r * Math.cos((175 + -angle) * Math.PI / 180),
                                        cy: y0 + r * Math.sin((175 + -angle) * Math.PI / 180),
                                        r: 4
                                    },
                                    style: {
                                        fill: 'rgba(1, 248, 68, 0.4)',
                                        stroke: 'rgba(1, 248, 68, 0.4)'
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 刻度仪表盘 */
                        {
                            type: 'gauge',
                            center: ['50%', '50%'],
                            radius: '68.5%', // 错位调整此处
                            startAngle: 0,
                            endAngle: 360,
                            axisLine: { show: false },
                            splitLine: { show: false },
                            axisTick: {
                                splitNumber: 10,
                                // length: 8,  // 刻度长度
                                length: '4%',
                                lineStyle: {
                                    color: 'rgba(1, 248, 68, 0.4)',
                                    width: 1.5
                                }
                            },
                            axisLabel: { show: false }
                        },
                        /** 内心圆 */
                        {
                            type: 'custom',
                            coordinateSystem: 'none',
                            renderItem: (params, api) => {
                                return {
                                    type: 'circle',
                                    shape: {
                                        cx: api.getWidth() / 2,
                                        cy: api.getHeight() / 2,
                                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.38,
                                        startAngle: (175 + angle) * Math.PI / 180,
                                        endAngle: (300 + angle) * Math.PI / 180
                                    },
                                    style: {
                                        fill: 'transparent',
                                        stroke: '#00374C80',
                                        lineWidth: 2.6
                                    },
                                    silent: true
                                }
                            },
                            data: [0]
                        },
                        /** 饼图 */
                        {
                            name: '已完成',
                            type: 'pie',
                            startAngle: 90,
                            z: 0,
                            label: {
                                position: 'center'
                            },
                            radius: ['56%', '44%'],
                            silent: true,
                            animation: false, // 关闭饼图动画
                            data: [{
                                value: dataValue,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0.2,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [
                                            { offset: 0, color: '#01f74420' },
                                            { offset: 1, color: '#01f744' }
                                        ]
                                    }
                                }
                            }, {
                                name: '未完成',
                                value: data[1],
                                label: { show: false },
                                itemStyle: { color: '#00374C' }
                            }]
                        },
                        /** 饼图上刻度 */
                        {
                            type: 'gauge',
                            center: ['50%', '50%'],
                            radius: '63%', // 错位调整此处
                            startAngle: 0,
                            endAngle: 360,
                            splitNumber: 12,
                            axisLine: { show: false },
                            splitLine: {
                                // length: 39,
                                length: '24%',
                                lineStyle: {
                                    width: 10,
                                    color: '#002837'
                                }
                            },
                            axisTick: { show: false },
                            axisLabel: { show: false }
                        },
                    ]
                };

                var self = this;
                this.timer2 = setTimeout(() => {
                    angle = angle + 2;
                    self.chart.setOption(option, true);
                }, 100)


                /**
                 * 圆弧角度
                  ◜    270°   ◝  
                180°    ↻      360°
                  ◟    90°    ◞
                 * 
                
                 */

                this.chart.setOption(option);
            }
            else {
                this.chart.setOption({
                    title: {
                        text: text,
                        x: 'center',
                        y: 'center',
                        textStyle: textStyle
                    },
                    tooltip: {
                        trigger: 'item',
                        show: false
                    },
                    series: [{
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: ['70%', '90%'],
                        animationDuration: 1000,
                        clockwise: false,
                        avoidLabelOverlap: false,
                        hoverOffset: 0,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            show: false,
                        },
                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 30,
                                lineStyle: {
                                    width: 1
                                }
                            }
                        },
                        roundCap: true,
                        data: data,
                    }]
                })
            }
        },
        getFirstData() {
            if (this.obj.tableData.tableId && this.obj.tableData.itemId && this.obj.tableData.maxNumber > 0) {
                var result = this.getTableValue(this.obj.tableData.tableId, this.obj.tableData.itemId, 1);
                if (result.code == 200) {
                    this.getLineData();
                } else {
                    var self = this;
                    window.setTimeout(function () {
                        self.getFirstData();
                    }, 500);
                }
            }

            // #region 没有配置数据显示默认内容
            if (!this.obj.tableData.tableId) {
                var maxValue = this.obj.tableData.maxNumber;
                this.showContent = true;

                var value = 80;
                var text = "100%";
                var data = [100];
                if (maxValue > value) {
                    text = this.transInteger(value / maxValue * 100, this.obj.tableData.decimal) + "%";
                    data = [value, maxValue - value]
                }

                this.setOptions(text, data);
                return false;
            }
            // #endregion

            // #region 参数不完整
            if (!this.obj.tableData.itemId || this.obj.tableData.maxNumber <= 0) {
                this.showContent = false;
                return false;
            }
            // #endregion
        },
        getLineData() {
            var maxValue = this.obj.tableData.maxNumber;
            this.showContent = true;

            var result = this.getTableValue(this.obj.tableData.tableId, this.obj.tableData.itemId, 1);
            if (result.code == 200) {
                var value = result.data;
                var text = "100%";
                var data = [100];
                if (maxValue > value) {
                    text = this.transInteger(value / maxValue * 100, this.obj.tableData.decimal) + "%";
                    data = [value, maxValue - value]
                }
                this.setOptions(text, data);
            }
            return false;

            this.filterForm.tableId = this.obj.tableData.tableId;
            this.filterForm.structureId = this.obj.tableData.itemId;

            if (this.obj.tableData.type != 1) {
                oneLoad(this.filterForm).then((res) => {
                    if (res.data.code == 0) {

                        var value = res.data.data;

                        // this.showContent = true;

                        var text = "100%";
                        var data = [100];
                        if (maxValue > value) {
                            text = this.transInteger(value / maxValue * 100, this.obj.tableData.decimal) + "%";
                            data = [value, maxValue - value]
                        }

                        this.setOptions(text, data);
                    } else {
                        console.error(res.data.message)
                    }
                }).catch(() => {
                    clearInterval(this.timer)
                });
            } else {
                boardOneLoad(this.filterForm).then((res) => {
                    if (res.data.code == 0) {
                        var value = res.data.data;

                        // this.showContent = true;

                        var text = "100%";
                        var data = [100];
                        if (maxValue > value) {
                            text = this.transInteger(value / maxValue * 100, this.obj.tableData.decimal) + "%";
                            data = [value, maxValue - value]
                        }

                        this.setOptions(text, data);
                    } else {
                        console.error(res.data.message)
                    }
                }).catch(() => {
                    clearInterval(this.timer)
                });
            }
            // }
        }
    },
    watch: {
        obj: {
            handler(newVal, oldVal) {
                this.setStyle();

                // 数据改变了 动态更新echart
                if (JSON.stringify(this.obj.tableData) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj.tableData);

                    this.reloadInfo();
                }
            },
            deep: true,  // 深度监听
        }
    },
}
</script>